<template>
    <div>
        <!-- 当页面有商品 -->
        <div v-if="!$store.getters.isEmpty">
            <!-- 滑动单元格 -->
            <van-swipe-cell v-for="(item, index) in shopcarlist" :key="index">
            <van-card
            :num="item.count"
            :price="item.sell_price"
            :title="item.title"
            :thumb="item.thumb_path"
            >
            <div slot="footer">
                <van-stepper v-model="item.count" input-width="1.2rem" button-size="1.2rem" integer @plus="add(item.id)" @minus="sub(item.id)"/>
            </div>
            </van-card>
            <!-- 滑动删除 -->
            <template slot="right">
            <van-button square type="danger" text="删除" class="delete-button" @click="remove(item.id)" />
            </template>
            </van-swipe-cell>
        </div>
        <!-- 当页面为空 -->
        <div v-else class="empty">
            <img src="../../../assets/shopcar.jpg" alt />
            <p>购物车空空如也</p>
            <van-button to="/goods/list" type="info" size="mini">去逛逛</van-button>
        </div>
    <!-- 底部提交订单栏 -->
            <van-submit-bar
            :price="$store.getters.total"
            button-text="提交订单"
            @submit="onSubmit"
            />
    </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
    data () {
        return {
 
        };
    },
    created() {
    this.$store.dispatch('getshopcarinfo')
  },
    methods:{
        //左滑删除事件
        removegood(n) {
           
        },
        // 提交订单事件
        onSubmit() {
           
            
        },
        ...mapMutations(['add','sub','remove']),
    },
     computed:{
    ...mapState(['shopcarlist']),
}
}
</script>
<style scoped lang="less">
    .empty {
    color: #ccc;
    padding: 15px 0;
    img {
        width: 100px;
    }
    text-align: center;
    }

</style>
<style>
.van-submit-bar__button--danger {
    border-radius: 0 !important;
}
.delete-button {
  height: 100% !important;
}
</style>